﻿<script setup lang="ts" name="EpTag">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const inputValue = ref('')
const dynamicTags = ref(['标签1', '标签2', '标签3'])
const inputVisible = ref(false)
const InputRef = ref()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value?.input?.focus()
  })
}
const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

const checked = ref(false)
const onChange = (status: boolean) => {
  checked.value = status
}
</script>
<template>
  <el-space :size="systemConfig.space" fill>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>基础用法</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-tag>默认标签</el-tag>
              <el-tag type="success">成功标签</el-tag>
              <el-tag type="info">信息标签</el-tag>
              <el-tag type="warning">警告标签</el-tag>
              <el-tag type="danger">危险标签</el-tag>
              <el-tag color="#626aef" style="color: #ffffff;" effect="dark">自定义颜色标签</el-tag>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>可移除标签</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-tag closable>默认标签</el-tag>
              <el-tag closable type="success">成功标签</el-tag>
              <el-tag closable type="info">信息标签</el-tag>
              <el-tag closable type="warning">警告标签</el-tag>
              <el-tag closable type="danger">危险标签</el-tag>
              <el-tag closable color="#626aef" style="color: #ffffff;" effect="dark">自定义颜色标签</el-tag>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>动态添加标签</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">{{ tag }}</el-tag>
              <el-input v-if="inputVisible" ref="InputRef" style="display: inline-block;width: 70px;margin: 6px;" v-model="inputValue" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
              <el-button v-else size="small" @click="showInput">添加标签</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>各种尺寸的标签</span>
            </div>
          </template>
          <el-form>
            <el-form-item label="大型标签">
              <el-tag size="large" closable>默认标签</el-tag>
              <el-tag size="large" closable type="success">成功标签</el-tag>
              <el-tag size="large" closable type="info">信息标签</el-tag>
              <el-tag size="large" closable type="warning">警告标签</el-tag>
              <el-tag size="large" closable type="danger">危险标签</el-tag>
              <el-tag size="large" closable color="#626aef" style="color: #ffffff;" effect="dark">自定义颜色标签</el-tag>
            </el-form-item>
            <el-form-item label="默认标签">
              <el-tag closable>默认标签</el-tag>
              <el-tag closable type="success">成功标签</el-tag>
              <el-tag closable type="info">信息标签</el-tag>
              <el-tag closable type="warning">警告标签</el-tag>
              <el-tag closable type="danger">危险标签</el-tag>
              <el-tag closable color="#626aef" style="color: #ffffff;" effect="dark">自定义颜色标签</el-tag>
            </el-form-item>
            <el-form-item label="小型标签">
              <el-tag size="small" closable>默认标签</el-tag>
              <el-tag size="small" closable type="success">成功标签</el-tag>
              <el-tag size="small" closable type="info">信息标签</el-tag>
              <el-tag size="small" closable type="warning">警告标签</el-tag>
              <el-tag size="small" closable type="danger">危险标签</el-tag>
              <el-tag size="small" closable color="#626aef" style="color: #ffffff;" effect="dark">自定义颜色标签</el-tag>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>标签主题</span>
            </div>
          </template>
          <el-form>
            <el-form-item label="深色标签">
              <el-tag effect="dark" closable>默认标签</el-tag>
              <el-tag effect="dark" closable type="success">成功标签</el-tag>
              <el-tag effect="dark" closable type="info">信息标签</el-tag>
              <el-tag effect="dark" closable type="warning">警告标签</el-tag>
              <el-tag effect="dark" closable type="danger">危险标签</el-tag>
            </el-form-item>
            <el-form-item label="浅色标签">
              <el-tag closable>默认标签</el-tag>
              <el-tag closable type="success">成功标签</el-tag>
              <el-tag closable type="info">信息标签</el-tag>
              <el-tag closable type="warning">警告标签</el-tag>
              <el-tag closable type="danger">危险标签</el-tag>
            </el-form-item>
            <el-form-item label="朴素标签">
              <el-tag effect="plain" closable>默认标签</el-tag>
              <el-tag effect="plain" closable type="success">成功标签</el-tag>
              <el-tag effect="plain" closable type="info">信息标签</el-tag>
              <el-tag effect="plain" closable type="warning">警告标签</el-tag>
              <el-tag effect="plain" closable type="danger">危险标签</el-tag>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>可选中的标签</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-check-tag checked>选中的标签</el-check-tag>
              <el-check-tag :checked="checked" @change="onChange">可选中标签</el-check-tag>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}
</style>
